<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>Re01 HTML 教学小工具</title>
    <meta name="description" content="康文昌的在线HTML 教学小工具。" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />

    <style>
      body {
        margin: 0;
      }

      a {
        color: #216cd3;
        text-decoration: none;
        border-bottom: 1px dashed;
      }
      header {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-bottom: 1px solid #ccc;
      }
      .main {
        height: calc(100vh - 51px);
        overflow: hidden;
        display: flex;
      }
      .flex1 {
        flex: 1;
      }
      .hr {
        width: 10px;
      }
      #show {
        height: 100%;
        width: 100%;
      }
      #edit {
      }
      @media (max-width: 600px) {
        .main {
          flex-direction: column;
        }
      }
    </style>
  </head>

  <body>
    <header>
      <a href="https://imgloc.com/" target="_blank" rel="noopener noreferrer"
        >图床1</a
      >
      <!-- <a href="https://img.wang/" target="_blank" rel="noopener noreferrer"
        >图床1</a
      > -->
      <a href="https://imgtu.com/" target="_blank" rel="noopener noreferrer"
        >图床2</a
      >
      <button onclick="init()">初始化</button>
      <button onclick="note()">查看说明</button>
      <button onclick="save()">保存文件</button>
    </header>
    <div class="main">
      <div class="flex1">
        <div id="edit" style="height: 100%; width: 100%"></div>
      </div>
      <!-- <div class="hr"></div> -->
      <div class="flex1">
        <iframe frameborder="0" id="show" title="page"></iframe>
      </div>
    </div>
    <script>
      let tip = `<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="margin: 0">
    <p>加载中，请稍等……</p>
    <p>
      如果长时间依然无法打开，就说明你的这个手机浏览器不兼容，用Chrome或Edge手机浏览器试试
    </p>
    <p>或者尝试如下方式：</p>
    <p>
      1. 使用<a
        target="_blank"
        rel="noopener noreferrer"
        href="https://host.retiehe.com/"
        >热铁盒静态网站托管(图片传到图床使用)</a
      >；
    </p>
    <p>
      2. 使用<a
        target="_blank"
        rel="noopener noreferrer"
        href="https://c.runoob.com/front-end/61/"
        >菜鸟html工具</a
      >;
    </p>
    <p>
      3. 电脑端使用<a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.bilibili.com/video/BV1k34y1Y7xk/"
        >vscode，点此查看教程</a
      >，手机端使用<a
        target="_blank"
        rel="noopener noreferrer"
        href="https://www.coolapk.com/apk/top.webcat.editor"
        >webcat应用</a
      >；
    </p>
  </body>
</html>
`;
      document.getElementById("show").srcdoc = tip;
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", function () {
          navigator.serviceWorker.register("sw.js");
        });
      }
    </script>
    <script
      id="monaco-editor-script"
      src="https://cdn.staticfile.org/monaco-editor/0.33.0/min/vs/loader.js"
      crossorigin="anonymous"
    ></script>
    <script>
      require.config({
        paths: { vs: "https://cdn.staticfile.org/monaco-editor/0.33.0/min/vs" },
      });

      window.MonacoEnvironment = {
        getWorkerUrl: function (workerId, label) {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
                self.MonacoEnvironment = {
                  baseUrl: 'https://cdn.staticfile.org/monaco-editor/0.33.0/min/'
                };
                importScripts('https://cdn.staticfile.org/monaco-editor/0.33.0/min/vs/base/worker/workerMain.js');`)}`;
        },
      };
      let ins;
      let temp = `<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>康文昌的在线HTML 教学小工具</title>
    <style>  
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <p>在此处开始写html代码，下面将会实时显示效果。</p>
  </body>
</html>
`;
      let docs = `<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>康文昌的在线HTML 教学小工具</title>
    <style>  
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
	  <h1>注意：上方编辑器的修改将在此处实时显示变更。</h1>
    <p>这是网页html 的标准模板，各自标签的作用<a target="_blank" rel="noopener noreferrer" href="https://www.bilibili.com/video/BV1hY411j7UM/">看这里介绍</a></p>
    <p>删除body标签内的所有内容就可以开始写了</p>
	  <p>这只是用来教学的小工具，为了让很多不会安装或使用vscode的同学先上手，所以如果你想正式使用，请看我后面专门的那期环境配置vscode安装使用视频。</p>
	  <p>手机端功能有限，仅用于熟悉html、css、js 的基本作用</p>
	  <p>手机端部分浏览器无法保存文件到本地，请使用Chrome或Edge手机浏览器保存</p>
	  <p>安卓手机也可以下载<a target="_blank" rel="noopener noreferrer" href="https://www.coolapk.com/apk/top.webcat.editor"> WebCat </a>使用，或者元岛知识库有众多其他方法。</p>
    <p>推荐uniCloud网站静态托管，：<a target="_blank" rel="noopener noreferrer" href="https://unicloud.dcloud.net.cn/login">https://unicloud.dcloud.net.cn/login </a></p>
    <p>另外再推荐一个热铁盒静态托管，它既可以在线编辑，又可以直接生成网站，非常方便：<a target="_blank" rel="noopener noreferrer" href="https://host.retiehe.com/">https://host.retiehe.com/ </a></p>
    <p>此工具无法使用你手机或电脑上的图片，需要前往上面的第三方图床网站上传图片（请勿上传隐私图片），获得后缀为jpg或png的网络图片地址后粘贴到src 属性中</p>
    <img src="https://www.midorg.com/midlogo.png" alt="logo" width="100px" height="100px">
    <br>
    <a
      href="https://www.midorg.com/"
      target="_blank"
      rel="noopener noreferrer"
      >
      元岛社区 www.midorg.com 
    </a>
  </body>
</html>
`;
      let ht = window.localStorage.getItem("html") || docs;
      require(["vs/editor/editor.main"], function () {
        ins = monaco.editor.create(document.getElementById("edit"), {
          value: ht,
          language: "html",
          minimap: {
            enabled: false,
          },
          theme: "vs-dark",
          width: "100%",
        });
        document.getElementById("show").srcdoc = ht;
        ins.onDidChangeModelContent(() => {
          document.getElementById("show").srcdoc = ins.getValue();
          window.localStorage.setItem("html", ins.getValue());
        });
      });
      function save() {
        let a = document.createElement("a");
        let blob = new Blob([ins.getValue()], { type: "application/html" });
        a.href = URL.createObjectURL(blob);
        a.download = "index.html";
        a.style.display = "none";
        a.target = "_blank";
        document.body.appendChild(a);
        a.click();
      }
      function init() {
        ins.setValue(temp);
        window.localStorage.setItem("html", temp);
        document.getElementById("show").srcdoc = temp;
      }
      function note() {
        ins.setValue(docs);
        window.localStorage.setItem("html", docs);
        document.getElementById("show").srcdoc = docs;
      }
    </script>
  </body>
</html>
